import React, {Component} from "react";
import { Space, Table, Select, Divider,Card} from "antd";
const { Column, ColumnGroup } = Table;
import getData from '../../compontens/GetData/getData.jsx'; 

const col = ['sequence_identifier', 'vfg_id', 'similarity', 'alignment_length', 'matched_count', 'mismatched_count', 'gap_count', 'insertion_count', 'start_position', 'end_position', 'e_value', 'alignment_score'];



const Type = [
  {
    value: 'pre',
    label: 'Precentage',
  },
  {
    value: 'reads',
    label: 'Reads Number',
  },
];

const ClassInfo = [
  {
    value: 'K',
    label: 'Kingdom',
  },
  {
    value: 'P',
    label: 'Phylum',
  },
  {
    value: 'C',
    label: 'Class',
  },
  {
    value: 'O',
    label: 'Order',
  },
  {
    value: 'F',
    label: 'Family',
  },
  {
    value: 'G',
    label: 'Genus',
  },
  {
    value: 'S',
    label: 'Species',
  },
];



export default class Classification extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            columns:[],
            dataSource:[],
            typetext:'pre',
            classtext:'K',
        };
    }
      handletypeChange = (value) => {
        this.setState({
          typetext: value,
        })
        const file_Name = this.state.kra_result.classification_path + '/' + this.state.classtext + '_' +value + '.tsv';
        this.get_data(file_Name);
      };
      handleClassChange = (value) => {
        this.setState({
          classtext: value,
        })
        const file_Name = this.state.kra_result.classification_path + '/' + value + '_' +this.state.typetext + '.tsv';
        this.get_data(file_Name);
      };

    get_data = (file_Name) => {
      getData(file_Name)
      .then(result => {
        // 在这里处理返回的数据
        this.getTableData(result);
        
      })
      .catch(error => {
        alert('Error');
      });      
    }
    componentDidMount() {
      // const kra_result = localStorage.getItem('kra_result');
      const kra_result =  {
        "IDList": ["M0018C_2_month", "M0018C_1_month", "M0018C_3_month", "M0018C_14_day", "M0018C_birth", "M0018M_3_month", "M0018M_gest", "M0018M_birth"],
        "kra_path": "data/Result/1/Kraken_result",
        "result_path": "data/Result/1",
        "sankey_path": "data/Result/1/sankey",
        "krona_path": "data/Result/1/Krona_result",
        "classification_path": "data/Result/1/classification",
        "diversity_path": "data/Result/1/diversity"
      }
      if(!kra_result){
        return;
      }
      this.setState({
        kra_result: kra_result,
      })
      const file_Name = kra_result.classification_path + '/K_pre.tsv';
      this.get_data('data/a.txt');
    }
    getTableData = (data) => {
      const rows = data.split('\n');
              const columns = rows.map((row) => row.split('\t'));
              if(columns[columns.length-1].length==1&&columns[columns.length-1][0]==''){
                columns.pop();
              }
              this.setState({dataSource: columns});
  };
    render(){
        const { columns, dataSource, secondCity ,cities } = this.state;
        return(
            <div>
              <Space direction="horizontal" 
              style={{
                width:'100%',
              }} >
              {/* <Select
                style={{
                  width: "100%",
                  textAlign: "center",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center"
              }}
                defaultValue={ClassInfo[0]} 
                onChange={this.handleClassChange}
                options={ClassInfo}
              />
              <Select
                style={{
                  width: "100%",
                  textAlign: "center",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center"
              }}
                defaultValue={Type[0]} 
                onChange={this.handletypeChange}
                options={Type}
              /> */}
              </Space>
                <Divider orientation="left">VFDB</Divider>
                      <Table dataSource={dataSource.slice(1)} >
                        {dataSource.length > 0 &&
                                col.map((item, index) => (
                                <Column title={item} dataIndex={index} key={item} />
                                ))}                      
                      </Table>      
            </div>
        )
    }
    
}